<?php
$per_url = Yii::$app->params['imgurl'];
$setting = Yii::$app->setting;
$this->title = $model->front_title;
$taglist = \common\components\Tools::tagToTxt($model->mark);

$tagstr = $model->front_title;
if(count($taglist) > 0){
    foreach($taglist as $v){
        $tagstr .= ',' . $v['cont'] ;
    }
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title><?=$model->front_title .' | '. $setting->get('site_title')?></title>
    <meta name="keywords" content="<?=$tagstr?>">
    <meta name="Description" content="<?='《'. $model->front_title  .'》' . $model->intro?>">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
        body{
            padding:0px;
            margin:0px;
            background:#f1f1f8;
        }
        .action{display: flex;align-items: center;margin-top: 15px}
        .action img{width:20px}
        .action span{font-size: 12px;color:#fff;margin-left:10px}
        .mymark{background: #f1f1f8;padding: 2px 10px;font-size:12px;color:#333;margin-right: 6px;border-radius: 6px;box-shadow: 0 0 6px #333}

        .tag ul{padding:0px;margin:0px}
        .tag ul li{float:left;list-style:none;margin-right:6px;margin-top:8px;}
        .tag ul li a{text-decoration:none;}
        .tag-item{border:1px solid #f1f1f8;color:#fff;font-size:12px;padding:1px 8px;border-radius:10px}
        .mui-btn{
            padding: 4px 12px;
            border-radius:6px;
        }
        .item-list ul{padding:0px;margin:0px}
        .item-list ul li{margin-top:5px;list-style:none;padding:10px 15px;border-bottom:1px solid #f1f1f8;color:#fff;background: #333;border-radius: 6px 6px 20px 6px}
        .mui-toast-container
        {
            line-height: 17px;
            position: fixed;
            z-index: 9999;
            top: 50%;
            left: 50%;
            -webkit-transition: opacity .3s;
            transition: opacity .3s;
            -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
            opacity: 0;
        }
        .sec-two .mui-btn-link {
            color: #fff;
        }
        .sec-two p{margin-bottom:0px;}
        #myheader a{text-decoration: none;}

        .sec-two{margin:15px 15px 15px 30px;padding: 10px;background: #333;border-radius: 6px 6px 20px 6px}

        .product-list-header{
            overflow: hidden;
            line-height: 47px;
        }
        .product-list-header h3{
            font-size: 16px;
            line-height: 1;
            float: left;
            margin-top: 15px;
            padding-left: 15px;
            position: relative;
            color:#333;

        }
        .product-list-header h3:after {
            content: "";
            position: absolute;
            width: 2.5px;
            height: 17.5px;
            left: 0;
            top: 50%;
            background-color: #333;
            border-radius: 5px;
            margin-top: -9px;
        }
        .sec-three ul{padding: 0px;margin: 0px}
        .sec-three ul li{list-style: none;overflow: hidden;}
        .sec-three ul li a{display: block;}
        .sec-three li a {
            width: 30%;
            margin-right: 5%;
            float: left;
            text-decoration: none;
        }
        .sec-three li a img {
            width: 100%;
            display: block;
            border: 1px solid #E6E6E6;
            border-radius: 6px;
        }
        .sec-three li a h3{
            text-align: center;
            font-size: 12px;
            line-height:32px;
            color:#333;
            margin: 0;
            padding: 0;
            border: 0;
        }
        .sec-three li a:nth-child(3n) {
            margin-right: 0;
        }
        .details_bottom_nav{
            display: flex;
            line-height: 49px;
            text-align: center;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            box-shadow: 0px -1px 8px #CCCCCC;
        }
        .details_bottom_nav a {
            flex: 1;
            font-size: 14px;
            color: #333;
            background-color: #FFFFFF;
        }
        .details_bottom_nav a:nth-child(2) {
            color: #FFFFFF;
            background-color: #333;

    </style>
    <!--    css-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/mui/3.7.1/css/mui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.5.1/animate.min.css">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/layer/2.3/skin/layer.css" rel="stylesheet">
</head>
<body>
<div class="page-book-item" style="margin-bottom: 60px;">
    <header id="myheader" class="mui-bar mui-bar-nav">
        <a href="javascript:history.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #333;"></a>
        <a href="/touch/default/index" class="mui-icon mui-action-menu mui-icon-home mui-pull-right" style="color: #333;"></a>
        <h1 class="mui-title"><?=$model->front_title?></h1>
    </header>
    <div class="sec-one wow zoomIn" data-wow-duration="1s" style="margin: 80px 15px 0px 30px;position: relative;background: #333;box-shadow: 0 0 6px #333;border-top-right-radius: 6px;border-top-left-radius: 6px;border-bottom-left-radius: 6px;border-bottom-right-radius: 20px">
        <div class="" style="padding: 20px 15px 20px 110px;">
            <p>
                <?php if($model->is_over == 1){ ?>
                    <span class="mymark">完结</span>
                <?php }else{ ?>
                    <span class="mymark">更新中</span>
                <?php }?>
                <?php if($model->is_recommend == 1){?>
                    <span class="mymark">推荐</span>
                <?php }?>
                <?php if($model->is_hot == 1){?>
                    <span class="mymark">热门</span>
                <?php }?>
            </p>
            <p style="color:#fff;font-size: 13px;line-height: 1.6"><?=$model['intro']?></p>

            <div class="tag">
                <ul>
                    <?php foreach( \common\components\Tools::tagToTxt($model->mark) as $v){?>
                        <li><a href=""><span class="tag-item"><?=$v['cont']?></span></a></li>
                    <?php }?>
                </ul>
                <div class="clearfix"></div>
            </div>

            <div class="action">
                <div style="flex: 1;">
                    <img src="/img/icon-like.png" alt=""><span> <?=$model['zan_num']?></span>
                </div>
                <div style="flex: 1;text-align: right;">
                    <img src="/img/icon-view.png" alt=""><span> <?=$model['click_num']?></span>
                </div>
            </div>

            <div class="thumb" style="position: absolute;top:-15px;left:-15px;box-shadow: 0 0 10px #f1f1f8;border-radius: 6px;">
                <img src="<?=$per_url . $model->thumb_img?>" alt="" style="width:100px;border-radius: 6px;">
            </div>
        </div>
    </div>

    <div class="sec-two wow slideInRight" data-wow-duration="1.2s">
        <a href="/book/<?=end($list)['number']?>.html">
            <div style="position: relative">
                <button type="button" class="mui-btn mui-btn-link">
                    <span class="glyphicon glyphicon-time" style="margin-right: 10px"></span>
                    最新 <span style="color:#ccc;margin-left: 10px;font-weight: 300"><?=end($list)['front_title']?></span>
                </button>
                <div style="color:#fff;position:absolute;top:4px;right:0px"><span class="glyphicon glyphicon-menu-right"></span></div>
            </div>
        </a>
        <a href="/touch/default/catalog?id=<?=$model->number?>">
            <div style="position: relative;margin-top: 10px">
                <button type="button" class="mui-btn mui-btn-link">
                    <span class="glyphicon glyphicon-list" style="margin-right: 10px"></span>
                    目录 <span style="color:#ccc;margin-left: 10px;font-weight: 300">共 <?=count($list)?> 话</span>
                </button>
                <div style="color:#fff;position:absolute;top:4px;right:0px"><span class="glyphicon glyphicon-menu-right"></span></div>
            </div>
        </a>

    </div>

    <div class="sec-three wow slideInUp" data-wow-duration="1.3s" style="margin: 15px">
        <div class="product-list-header" style="">
            <h3>猜你喜欢</h3>
        </div>
        <ul>
            <li>
                <?php foreach($like as $v){ ?>
                    <a href="/book-item/<?=$v['number']?>.html">
                        <img src="/img/120-160.png" style=" background:url(<?=$per_url . $v['thumb_img']?>); background-size:cover">
                        <h3><?=$v['front_title']?></h3>
                    </a>
                <?php }?>
            </li>
        </ul>
    </div>

</div>
<div class="details_bottom_nav" style="display: flex;line-height: 49px;text-align: center;position: fixed;bottom: 0;left: 0;width: 100%; box-shadow: 0px -1px 8px #CCCCCC;">
    <a href="#" id="collect" style="text-decoration-color: #333;text-decoration: none">收藏</a>
    <a href="/book/<?=$list[0]['number']?>.html">开始阅读</a>
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script>
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<script>
    $(document).ready(function(){
        new WOW().init();
    });
    $(function() {
        $('#collect').click(function(){
            $.ajax({
                type: 'POST',
                url: "/touch/default/collection",
                data:{
                    code:<?=$model->number?>,
                },
                dataType: 'json',
                success: function(res){
                    if(res.code == 200){
                        layer.msg(res.message);
                    }else if(res.code == 202){
                        window.location.href = '/touch/default/login';
                    }else{
                        layer.msg(res.message);
                    }
                },
                error:function (error) {
                    console.log('error:',error);
                }
            })
        });

    });
</script>